<script setup lang="ts">

import {onBeforeMount, onMounted, ref, type Ref} from "vue";
let hourEL: Ref<HTMLElement | null> = ref(null);
let minuteEl: Ref<HTMLElement | null> = ref(null);
let secondEl: Ref<HTMLElement | null> = ref(null);
let time = ref(new Date())

function setTime() {
  time.value = new Date()
  // let _time_ = new Date();
  // if (_time_.getHours() < 10)
  //   hourEL.value.innerHTML = '0' + _time_.getHours() + '<p style="text-shadow: 1px 1px 12px #97aaef;">Hour</p>';
  // else
  //   hourEL.value.innerHTML = _time_.getHours() + '<p style="text-shadow: 1px 1px 12px #97aaef;">Hour</p>';
  // if (_time_.getMinutes() < 10)
  //   minuteEl.value.innerHTML = '0' + _time_.getMinutes() + '<p style="text-shadow: 1px 1px 12px #97aaef;">Minute</p>';
  // else
  //   minuteEl.value.innerHTML = _time_.getMinutes() + '<p style="text-shadow: 1px 1px 12px #97aaef;">Minute</p>';
  // if (_time_.getSeconds() < 10)
  //   secondEl.value.innerHTML = '0' + _time_.getSeconds() + '<p style="text-shadow: 1px 1px 12px #97aaef;">Second</p>';
  // else
  //   secondEl.value.innerHTML = _time_.getSeconds() + '<p style="text-shadow: 1px 1px 12px #97aaef;">Second</p>';
}

function setPosition(_object_: HTMLElement) {
  _object_.style.bottom = 0 + 'px';
}

const isPending = ref(true);
onBeforeMount(() => {

})
onMounted(function () {
  if (hourEL.value) {
    setTime();
    setPosition(hourEL.value);
    setTimeout(function () {
      minuteEl.value.style.bottom = 0 + 'px';
    }, 100);
    setTimeout(function () {
      secondEl.value.style.bottom = 0 + 'px';
    }, 200);
    setInterval(setTime, 1000);
  }
})


</script>

<template>
  <aside class="left__side">

      <div class="clock">
        <div class="timer__background"></div>
        <div class="timer__text">

          <div id="calendar__hour " style="bottom: 100%;" ref="hourEL">
            <p style="text-align: center">
              <span v-show="time.getHours() < 10">0</span>
              <span>{{ time.getHours() }}</span>
            </p>
            <p> Hour</p>
          </div>

          <div class="items__vertical__horizontal__alignment">:</div>
          <div id="calendar__minute " style="bottom: 100%;" ref="minuteEl">
            <p style="text-align: center">
              <span v-show="time.getMinutes() < 10">0</span>
              <span>{{ time.getMinutes() }}</span>
            </p>
            <p>Minute</p>
          </div>
          <div class="items__vertical__horizontal__alignment">:</div>


          <div id="calendar__second " style="bottom: 100%;" ref="secondEl">
            <p style="text-align: center">
              <span  v-show="time.getSeconds() < 10">0</span>
              <span>{{ time.getSeconds() }}</span>
            </p>
            <p> Second</p>
          </div>



        </div>
      </div>
      <div class="calendar-profile__text">
        <div class="profile__text-block">
          <h2 class="profile__text-title">TianQing.SnowCrystal</h2>
          <p class="profile__text-content" style="color:aliceblue;">
            最终，我从喧嚣中归来，归于寂静的物体群。往后掰着指头过日子，第几千场雨或是一年年的例行公事。尘埃飞舞着，一个个经过点，终将串成尾声。街灯湿沥，星光苍老已逾数千万载；笔墨史书，功成名就终将湮没风尘；长夜伴雨，半梦半醒唯有此刻永恒。
          </p>
        </div>
      </div>
    <!--end of calendar-profile-->
    <div class="content-bottom__news">
      <div class="news-list">
        <ul class="news-list__list-block">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <!--end of news-->
    <div class="content-bottom__anime-recommend">
      <div class="anime-list">
        <ul class="anime-list__list-block">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <!--end of anime-recommend-->
  </aside>
</template>

<style scoped lang="scss">
.left__side {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}
.items__vertical__horizontal__alignment{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.clock {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timer__background {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
  background-image: url(/T306.jpg);
  background-position: bottom;
  background-size: cover;
  transition: all 0.4s cubic-bezier(.86,0,.29,.97);
}
.clock:hover .timer__background{
  filter: blur(2px);
  transition:all 0.8s cubic-bezier(.86,0,.29,.97);
}

.timer__text {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 0.5fr 1fr;
  //font-size: 32px;
}

.timer__text  div {
  color: rgb(216, 235, 247);
  user-select: none;
  text-shadow: 1px 1px 12px #9cade5;
  z-index: 2;
  //height: 10%;
  transition: all 0.4s cubic-bezier(.86,0,.29,.97);
}
.timer__text:hover div{
  text-shadow: 2px 2px 8px #9cade5;
  transition: all 0.8s cubic-bezier(.86,0,.29,.97);
}
.timer__text p {
  font-size: 24px;
  font-weight: bold;
}
.timer__text span {
  font-size: 24px;
  font-weight: bolder;
}






</style>